@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-cover: 0, 0, 0;
  }
  p {
    @apply text-sm leading-6 text-gray-600 !important;
  }
}

@layer components {
  .el-menu-navigation {
    @apply text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium !important;
  }
  .header-button {
    @apply relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 !important;
  }
  .devider-line {
    @apply border-b border-gray-900/10 pb-12 !important;
  }
  .element-input {
    @apply block flex-1 border-0 bg-transparent py-1.5 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6 !important;
  }
  .submit-button {
    @apply rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 !important;
  }
  .cancel-button {
    @apply text-sm font-semibold leading-6 text-gray-900 !important;
  }
  .option-item {
    @apply h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600 !important;
  }
  .el-button.el-button--primary {
    @apply bg-[var(--el-color-primary)] !important;
  }
  .custom-block.tip {
    @apply px-2 py-4 bg-[rgba(var(--el-color-primary-rgb),0.1)] rounded border-l-[5px] border-l-[var(--el-color-primary)] border-solid m-5 !important;
  }
}
